<template>
  <div>
    <el-dialog
      v-model="state.centerDialogVisible"
      :title="`质量监督问题-` + state.title"
      width="50%"
      align-center
      @open="openDialog"
      @close="closeDialog"
      class="dialogStyle"
    >
      <el-form
        ref="formInlineRef"
        :rules="rulesData"
        :model="formInline"
        class="demo-form-inline"
        label-width="100px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="项目名称" prop="projectId">
              <el-select
                v-model="formInline.projectId"
                clearable
                placeholder="请选择项目"
              >
                <el-option
                  v-for="item in state.projectOptionsArr"
                  :key="item.projectId"
                  :label="item.projectName"
                  :value="item.projectId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检查单位" prop="checkCompanyId">
              <el-select
                v-model="formInline.checkCompanyId"
                clearable
                disabled
                @change="changeHandel(1, formInline.checkCompanyId)"
                placeholder="请选择检查单位"
              >
              <!-- <el-option label="开发建设部" value="-3273533166343271534" /> -->
                <el-option
                  v-for="item in state.checkCompany"
                  :key="item.checkCompanyId"
                  :label="item.checkCompanyName"
                  :value="item.checkCompanyId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检查人" prop="checkUserId">
              <el-select
                v-model="formInline.checkUserId"
                clearable
                disabled
                placeholder="请选择检查人"
              >
              <el-option label="袁涛" value="2766762273998587566" />
                <!-- <el-option
                  v-for="item in state.inspectionPeople"
                  :key="item.userId"
                  :label="item.userName"
                  :value="item.userId"
                /> -->
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="问题分类" prop="problemCategory">
              <el-select
                v-model="formInline.problemCategory"
                clearable
                placeholder="请选择问题分类"
                @change="problemTypeChange(formInline.problemCategory)"
              >
                <el-option
                  v-for="item in state.problemClassification"
                  :key="item.problemId"
                  :label="item.problemName"
                  :value="item.problemId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="问题类型" prop="problemType">
              <el-select
                v-model="formInline.problemType"
                clearable
                placeholder="请选择问题类型"
              >
                <el-option
                  v-for="item in state.problemType"
                  :key="item.problemId"
                  :label="item.problemName"
                  :value="item.problemId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="处理部门" prop="dealDepartmentId">
              <el-select
                v-model="formInline.dealDepartmentId"
                clearable
                disabled
                @change="changeHandel(2, formInline.dealDepartmentId)"
                placeholder="请选择处理部门"
              >
                <el-option
                  v-for="item in state.processingDepartment"
                  :key="item.departmentId"
                  :label="item.departmentName"
                  :value="item.departmentId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="处理人" prop="dealUserId">
              <el-select
                v-model="formInline.dealUserId"
                clearable
                placeholder="请选择处理人"
              >
                <el-option
                  v-for="item in state.handler"
                  :key="item.userId"
                  :label="item.userName"
                  :value="item.userId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="截止时间" prop="deadline">
              <el-date-picker
                v-model="formInline.deadline"
                type="date"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>
        </el-row>
  
        <el-form-item label=""> </el-form-item>
        <el-form-item label="检查内容" class="oneline" prop="checkContent">
          <el-input
            v-model="formInline.checkContent"
            show-word-limit
            type="textarea"
          />
        </el-form-item>
        <el-form-item label="问题描述" class="oneline" prop="problemDescription">
          <el-input
            v-model="formInline.problemDescription"
            show-word-limit
            type="textarea"
          />
        </el-form-item>
        <el-form-item label="建议解决方案" class="oneline">
          <el-input
            v-model="formInline.solutionRemark"
            show-word-limit
            type="textarea"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button class="button_cancel2" @click="state.centerDialogVisible = false">取消</el-button>
          <el-button class="button_view" @click="submitHandler(formInlineRef)">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { qualitySupervision, department, projectListApi } from '@/api/project'
import upload from '@/components/uploadCom/upload.vue'
import { resetForm } from '@/common/utils/GlobalUtils.js'
import { ref, reactive, computed, onMounted } from 'vue'

import {
  ElDialog,
  ElButton,
  ElForm,
  ElFormItem,
  ElSelect,
  ElOption,
  ElDatePicker,
  ElRow,
  ElCol
} from 'element-plus'
const state = reactive({
  centerDialogVisible: false,
  title: computed(() => {
    return state.type == 0 ? '新增' : '修改'
  }),
  projectOptionsArr: [], //项目下拉
  inspectionUnit: [], //检查单位
  inspectionPeople: [], //检查人
  problemClassification: [], //问题分类
  problemType: [], //问题类型
  processingDepartment: [], //处理部门
  handler: [], //处理人
  editId: '', //编辑id
  type: 0, //0新增 1修改
  checkCompany:[],//检查单位
})
let formInlineRef = ref(null)
const rulesData = reactive({
  projectId: [{ required: true, message: '项目不能为空', trigger: 'blur' }],

  checkCompanyId: [
    { required: true, message: '请选择检查单位', trigger: 'blur' }
  ],
  checkUserId: [{ required: true, message: '请选择检查人', trigger: 'blur' }],
  problemCategory: [
    { required: true, message: '请选择问题分类', trigger: 'blur' }
  ],
  problemType: [{ required: true, message: '请选择问题类型', trigger: 'blur' }],
  dealDepartmentId: [
    { required: true, message: '请选择处理部门', trigger: 'blur' }
  ],
  dealUserId: [{ required: true, message: '请选择处理人', trigger: 'blur' }],
  deadline: [{ required: true, message: '请选择截止时间', trigger: 'blur' }],
  checkContent: [
    { required: true, message: '请输入检查内容', trigger: 'blur' }
  ],
  problemDescription: [
    { required: true, message: '请输入问题描述', trigger: 'blur' }
  ]
})
let formInline = reactive({
  projectId: '',
  checkCompanyId: '',
  checkUserId: '',
  problemCategory: '',
  problemType: '',
  dealDepartmentId: '',
  dealUserId: '',
  deadline: '',
  checkContent: '',
  problemDescription: '',
  solutionRemark: ''
})

const getprojectList = () => {
 /* projectListApi.getAllList('').then((res) => {
    const { code, data, msg } = res
    if (code == 200) {
      state.projectOptionsArr = data
    }
  })*/
  projectListApi.getProjectsByType().then(res=>{
      if (res.code === '200') {
          state.projectOptionsArr = res.data;
      }
  });
}
const emits = defineEmits(['getsearch'])
const submitHandler = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      let submitObj = JSON.parse(JSON.stringify(formInline))
      submitObj.deadline = submitObj.deadline + ' 23:59:59'
      // console.log(submitObj)
      if (state.type && state.type == 1) {
        // //编辑提交
        qualitySupervision.updateQualityProblem(submitObj).then((res) => {
          const { data, code, msg } = res
          if (code == '200') {
            state.centerDialogVisible = false
            emits('getsearch')
          }
        })
      } else {
        //新增提交
        qualitySupervision.addQuality(submitObj).then((res) => {
          const { data, code, msg } = res
          if (code == '200') {
            state.centerDialogVisible = false
            emits('getsearch')
          }
        })
      }
    }
  })
}
const openDialog = () => {
  if (state.type == 1) {
    //编辑
    qualitySupervision.getQualityProblem(state.editId).then((res) => {
      const { data, code, msg } = res
      if (code == '200') {
        Object.assign(formInline, data)
        let name = JSON.parse(window.localStorage.getItem('SST-DepartmentName')) || '';
        state.checkCompany = [{ checkCompanyId: formInline.checkCompanyId, checkCompanyName: name }];6
        formInline.problemCategory = '' + formInline.problemCategory
        formInline.problemType = '' + formInline.problemType
        //回显人员
        if (data.checkUserId) {
          getUserByDepartmentId(2, data.dealDepartmentId)
        }
        if (data.dealUserId) {
          getUserByDepartmentId(1, data.checkCompanyId)
        }
        getprojectList()
        getdepartmentList()
        getProblemType()
        if (formInline.problemCategory) {
          getProblemType(formInline.problemCategory)
        }
      }
    })
  } else {
    // 新增
    formInline.checkUserId = "2766762273998587566";
    formInline.checkCompanyId = "-3273533166343271534";
    formInline.dealDepartmentId = formInline.checkCompanyId =
      JSON.parse(window.localStorage.getItem('SST-DepartmentId')) || '';
    let name = JSON.parse(window.localStorage.getItem('SST-DepartmentName')) || '';
    state.checkCompany = [{ checkCompanyId: formInline.checkCompanyId, checkCompanyName: name }];
    getLoearDepartment(formInline.checkCompanyId);
    getUserByDepartmentId(2, formInline.dealDepartmentId);
  }
}
const closeDialog = () => {
  // resetForm(state)
  resetForm(formInline)
  state.handler = []
  state.inspectionPeople = []
  state.problemType = []
}
//获取所有部门信息
const getdepartmentList = () => {
  department.getAllDepartments().then((res) => {
    if (res.code == 200) {
      state.processingDepartment = res.data
    }
  })
}

const changeHandel = (type, id) => {
  if (type == 1) {
    formInline.checkUserId = ''
  } else {
    formInline.dealUserId = ''
  }
  getUserByDepartmentId(type, id)
}
const problemTypeChange = (id) => {
  getProblemType(id)
}

// 根据部门获取人员   type 1检查单位  2处理部门
const getUserByDepartmentId = (type, departmentId) => {
  department.getUserByDepartmentId(departmentId).then((res) => {
    if (res.code == 200) {
      if (type == 1) {
        state.inspectionPeople = res.data
      } else {
        state.handler = res.data
      }
    }
  })
}
//根据部门获取负责人
const getLoearDepartment = (departmentId) => {
  department.getLeaderByDepartmentId(departmentId).then((res) => {
    if (res.code == 200) {
      state.inspectionPeople = res.data
    }
  })
}
const getProblemType = (parentId) => {
  // console.log('---', parentId);
  qualitySupervision.type(parentId || '').then((res) => {
    if (res.code == 200) {
      if (!parentId) {
        state.problemClassification = res.data
      } else {
        state.problemType = res.data
      }
    }
  })
}
onMounted(() => {
  getprojectList()
  getdepartmentList()
  getProblemType()
})
defineExpose({
  state
})
</script>

<style lang="scss" scoped>
@import '@/assets/general_style/dialog.scss';
.el-form-item {
  width: 100% !important;
}

:deep(.el-date-editor) {
  width: 100%;
  height: 40px;
  .el-input__wrapper {
    width: 100%;
    height: 40px;
  }
}
</style>
<style lang="scss" scoped>
@import "@/views/constructionProjectManage/static/button.scss";
@import '@/views/constructionProjectManage/static/dialog.scss';
</style>
